<#assign ctx=request.contextPath />
<!doctype html>
<html xmlns="http://www.w3.org/1999/html">
<head>
    <meta charset="utf-8">
    <title>列表</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="renderer" content="webkit">
    <!-- CSS文件 -->
    <link href="${ctx}/css/bootstrap.min.css" rel="stylesheet">
    <link href="${ctx}/css/global.css" rel="stylesheet">
    <link href="${ctx}/css/plugins/footable/footable.core.css" rel="stylesheet">
    <link href="${ctx}/css/style.css" rel="stylesheet">
    <!--layui-->
    <link href="${ctx}/layui/css/layui.css" rel="stylesheet">
    <link href="${ctx}/layui/css/modules/layer/default/layer.css" rel="stylesheet">
</head>
<body>

<div style="padding: 15px;">
    <div class="layui-form-item">
        <div>
            <a href="${ctx}/noteList" class="layui-btn layui-btn-primary">返回</a>
        </div>
    </div>
    <div style="height: 1px; background-color: #e5e5e5; margin-top: 20px;"></div>
    <div class="wrapper wrapper-content table-responsive">
        <table class="table table-hover" id="tabList" data-page-size="10" data-filter=#filter data-limit-navigation="5">
            <thead>
            <tr>
                <th nowrap="nowrap">序号</th>
                <th nowrap="nowrap">访问IP</th>
                <th nowrap="nowrap">访问时间</th>
            </tr>
            </thead>
            <tbody id="tbodyDiv"></tbody>
            <#--分页部分-->
            <tfoot id="foot">
            <tr>
                <td colspan="20">
                    <ul class="pagination"></ul>
                </td>
            </tr>
            </tfoot>
        </table>
    </div>
<#-- 搜索无内容显示 -->
    <div class="box_1" id="noData">
        <i class="fa fa-frown-o fa-5x"></i>
        <p>抱歉，没有数据</p>
    </div>
</div>
<script src="${ctx}/js/jquery.min.js?v=2.1.4"></script>
<script src="${ctx}/js/bootstrap.min.js?v=3.3.6"></script>
<script src="${ctx}/js/plugins/footable/footable.all.min.js"></script>
<script src="${ctx}/layui/lay/modules/layer.js"></script>
<script>
    //自动分页必须初始化
    $(document).ready(function () {
        $('#tabList').footable({
            "paging": {
                "enabled": true
            },
            "sorting": {
                "enabled": false
            }
        });
        initTable();
    });
    // 初始化
    var list = JSON.parse('${listStr}');
    function initTable() {
        var html = "";
        for (var i = 0; i < list.length; i++) {
            var record = list[i];
            html += '<tr id="tr_' + record.nid + '">';
            html += '<td>' + (i + 1) + '</td>';
            html += '<td>' + record.ip + '</td>';
            html += '<td>' + record.date + '</td>';
            html += '</tr>';
        }
        if (list.length > 0) {
            $("#noData").css("display", "none");
        } else {
            $("#noData").css("display", "flex");
        }
        $('tbody#tbodyDiv').empty();
        $('tbody#tbodyDiv').html(html);
        $('.pagination').empty();
        $('#tabList').trigger('footable_initialize');// 表格数据重载、分页重载
    }

</script>
</body>
</html>
